<template>
    <div>
        <div style="margin-bottom: 10px"><el-button type="success" @click="create">添加模板</el-button></div>
        <!-- 添加模板弹出框 -->
        <el-dialog :visible.sync="createVisible" width="50%">
            <template >
                <div style="width: 50%"> <el-input style="margin-bottom: 10px" v-model="modelName" placeholder="请输入模板名称"></el-input></div>
                <el-table :data="createTable" border style="width: 100%">
                    <el-table-column  prop="level" label="级别" width="180">
                        <template slot-scope="scope">
                            <el-input style="border: none; " v-show="scope.row.show" v-model="scope.row.level"></el-input>
                            <span v-show="!scope.row.show">{{scope.row.level}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fraction" label="分数" width="180">
                        <template slot-scope="scope">
                            <el-input style="outline:none " v-show="scope.row.show" v-model="scope.row.fraction"></el-input>
                            <span v-show="!scope.row.show">{{scope.row.fraction}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" @click="deletezb(scope.$index,createTable)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button style="margin-top: 10px" size="mini" type="success" @click="() => append()">添加</el-button>
            </template>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="createVisible = false">取 消</el-button>
                    <el-button type="primary" @click="createModel">确 定</el-button>
                </span>
        </el-dialog>

        <!-- 模板列表 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="模板名称"
                             align="center"
                             prop="name">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="primary" @click="indexDetails(scope.row)">指标详情</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 指标详情弹出框 -->
        <el-dialog :visible.sync="updateVisible" width="60%">
            <template >
                <div style="float: left;line-height: 40px;">模板名称：</div><div style="width: 50%;float: left;">

<el-input style="margin-bottom: 10px" v-model="updateModelName" readonly></el-input></div>
                <el-table :data="createTable" border style="width: 100%">
                    <el-table-column  prop="level" label="级别" width="180">
                        <template slot-scope="scope">
                            <el-input style="border: none; " v-show="scope.row.show" v-model="scope.row.level"></el-input>
                            <span v-show="!scope.row.show">{{scope.row.level}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fraction" label="分数" width="180">
                        <template slot-scope="scope">
                            <el-input style="outline:none " v-show="scope.row.show" v-model="scope.row.fraction"></el-input>
                            <span v-show="!scope.row.show">{{scope.row.fraction}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="updateRow(scope.row)">修改</el-button>
                            <el-button size="mini" type="danger" @click="deleteRow(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-button style="margin-top: 10px" size="mini" type="success" @click="() => append()">添加

</el-button> -->
            </template>
            <span slot="footer" class="dialog-footer">
               <!--  <el-button @click="updateVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateModel()">确 定</el-button> -->
                <el-button type="primary" @click="updateVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <!-- 修改指定行指标弹出框 -->
        <el-dialog :visible.sync="updateRowVisible" width="30%">
            <div style="margin-bottom: 15px">
                <div style="margin-bottom: 5px">指标级别</div>
                <div><el-input v-model="updatelevel" placeholder="请重新输入级别"></el-input></div>
            </div>
            <div>
                <div style="margin-bottom: 10px">指标分数</div>
                <div><el-input v-model="updatefraction" placeholder="请重新输入分数"></el-input></div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateRowVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatelRowSure">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改名称弹出框 -->
        <el-dialog :visible.sync="updateNameVisible" width="30%">
            <div style="margin-bottom: 15px">
                <div style="margin-bottom: 5px">模板名称</div>
                <div><el-input v-model="updatename" placeholder="请输入名称"></el-input></div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateNameVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatelNameSure">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import Vue from 'vue'
    export default {
        data(){
            return{
                updateRowVisible:false,//修改单行指标弹出框
                updateModelName:'',//修改的模板名称
                updatecode:'',//修改传的id
                tableData: [],//模板列表接口
                createTable:[],//创建指标详情
                createVisible:false,//创建模板弹出框
                updateVisible:false,//指标详情弹出框
                modelName:'',//绑定的模板名称
                updatelevel:'',//绑定的指标级别
                updatefraction:'',//绑定的指标分数
                updateId:'',//修改指标传的id
                updatename:'',//修改的模板名称
                updateNameVisible:false,//修改名称弹出
                updatenamecode:'',//修改的名称id
            }
        },

        methods : {

            /*初始化查询所有角色接口*/
            async init () {
                let res = await this.$http('templatelist');
                this.tableData = res.results
            },

            async edit(row){
                console.log(row)
                this.updatename = row.name
                this.updatenamecode = row.code
                this.updateNameVisible = true
            },

            async updatelNameSure(){
                const res = await this.$http('updatename',{
                    code : this.updatenamecode,
                    name: this.updatename
                });
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                this.updateNameVisible = false
                this.init()
            },

            async handleDelete(row) {//删除模板接口


                this.$confirm('将永久删除该模板, 是否继续?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await this.$http('templateupdate',{
                        id : row.id,
                        del_flag : '1'
                    });

                    this.init();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            async deletezb(index,row){
                console.log(index)
                console.log(row)
                row.splice(index, 1);
            },

            async deleteRow(row){//删除指标行
                console.log(row)

                this.$confirm('将永久删除该级别, 是否继续?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await this.$http('templateupdate',{
                        id : row.id,
                        del_flag :'1',
                    });

                    this.indexDetails({
                        code : this.updatecode,
                        name : this.updateModelName,
                    });
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            async append() {//添加指标行按钮
                var list = {
                    level: '',
                    grade:'',
                    show:true
                }
                this.createTable.unshift(list)
            },
            async create(){//添加模板按钮
                this.modelName = ''
                this.createTable = []
                this.createVisible=true
            },
            async createModel(){//添加模板确定接口

                const res = await this.$http('createIndex', {
                    name : this.modelName,
                    // list:JSON.stringify(createTable)
                    list:this.createTable
                });

                this.$message({
                    message: '添加成功',
                    type: 'success'
                });
                this.createVisible = false
                this.modelName = ''
                this.init();
            },
            async indexDetails(row){//指标详情按钮
                console.log('指标详情接口按钮数据',row)
                this.updatecode = row.code
                this.updateModelName = row.name
                this.createTable = await this.$http('indexdetail',{
                    code:row.code
                });
                this.updateVisible = true

            },
            async updateModel(){//指标详情确认按钮
                await this.$http('createIndex', {

                    list:this.createTable,
                    name :this.updateModelName
                });
                this.updateVisible = false
                this.init();
            },
            async updateRow(row){//修改指标行按钮
                console.log('lllllllllllllll',row)
                this.updateRowVisible = true
                this.updataId = row.id
                this.updatelevel = row.level
                this.updatefraction = row.fraction
            },
            async updatelRowSure(){//修改指标行接口、确定按钮
                let res = await this.$http('templateupdate',{
                    id : this.updataId,
                    level : this.updatelevel,
                    fraction: this.updatefraction
                });
                console.log(res)

                if (res.count === 1) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.updateRowVisible = false

                    this.indexDetails({
                        code : this.updatecode,
                        name : this.updateModelName,
                    });
                }else{
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    });
                    this.updateRowVisible = false

                    this.indexDetails({
                        code : this.updatecode,
                        name : this.updateModelName,
                    });
                }



            }
        },
        mounted() {
            this.init()
        }
    }
</script>

<style scoped>


</style>
